{% extends "../../../templates/main_template.html" %}
{% block css_requires %}
<link type="text/css" href="/css/trivia.css" rel="stylesheet" media="screen" />
{% endblock %}
{% block js_requires %}
	


<script type="text/javascript">

	function processAnswer(el)
	{
		document.getElementById( 'triviaAnswer').value = el.id;
		document.getElementById('triviaForm').submit();
	}
	
	function processPossibleAnswers()
	{
		possible_answers_container = document.getElementById('possible_answers');
		possible_answers = possible_answers_container.getElementsByTagName('p');
		
		for(var i =0; i < possible_answers.length; i++)
		{
		    
			var element = possible_answers[i];
			console.log(element.id);
			element.addEvent('click',function()
			{
				processAnswer(this);
			});
			
		}
	}
	
	window.addEvent('domready', function() { 
	    
		processPossibleAnswers();
	});

</script>
{% endblock %}
{% block content %}
<h1>¡La hiperfantabulosa trivia de la comida saludable!</h1>
<p id="question">{{question.question_text}}</p>
<div id="possible_answers">
	{% for pa in question.possible_answers %}
	<p id="{{pa.key.id}}">
		{{pa.possible_answer_text}}
	</p>
	{% endfor %}
</div>
<form action="/trivia/answer/" method="post" id="triviaForm">
	<input type="hidden" name="triviaAnswer" id="triviaAnswer" value=""/>
	<input type="hidden" name="triviaQuestion" value="{{question.key.id}}"/>
</form>
{% endblock content %}